//导入哈希路由
import { HashRouter, BrowserRouter, Route, Routes, link, Link } from "react-router-dom";
//导入pages文件夹内的组件
import Layout from './pages/layout/index'
import Login from './pages/login/index'

//首页大屏
import Dashboard from './pages/dashboard/index'
//商品列表
import Good from './pages/good/goodList'
//用户管理
import User from './pages/user/index'

import { asyncRoutes } from './pages/index.jsx'
//accessRoutes 在vue-element-admin中表示可以访问的路由
//说白了就是计算出来的路由
//我们首先考虑二级路由
function createRoutes(asyncRoutes) {
    let result = []
    asyncRoutes.forEach(route => {
        //如果有路径或跳转链接
        if (route.path && route.element) {
            //push进数组
            result.push(
                <Route key={route.key} path={route.path} element={route.element}></Route>
            )
        }
        //如果有二级路由
        if (route.children) {
            //遍历
            route.children.forEach(route => {
                result.push(
                    <Route key={route.key} path={route.path} element={route.element}></Route>
                )
            })
        }
    });
    return result;
}
function App() {
    return (
        /*使用哈希路由*/
        <HashRouter>
            {/*跳转*/}
            {/* <Link to='/'>首页</Link>
            <Link to='/login'>登录</Link> */}
            {/*路由组件*/}
            <Routes>

                <Route path="/" element={<Layout />}>
                    {/* <Route path="/dashboard" element={<Dashboard />}></Route>
                    <Route path="/good" element={<Good />}></Route>
                    <Route path="/user" element={<User />}></Route> */}
                    {
                        createRoutes(asyncRoutes)
                    }
                </Route>
                <Route path="/login" element={<Login />}></Route>
            </Routes>
        </HashRouter>
    )
}

export default App